<template>
  <div class="work">
    <!-- 头部 -->
    <div class="header">
      <div class="left">
        <img class="leftimg" src="../../assets/icon.png" alt="">
        <div class="text">
          <div class="up">
            Hello,Everyone! 祝你今天工作顺利
          </div>
          <div class="down">
            蓝色光标数据科技股份有限公司-RCS商业消息部
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">
          进行中的活动/总数
        </div>
        <div class="bottom">
          2/24
        </div>
      </div>
    </div>
    <!-- center-search -->
    <div class="center">
      <div class="centerleft">
        <div class="nav">
          <div class="which"><span class="txt">筛选条件：</span>
            <el-select class="select" v-model="value1" multiple placeholder="请选择筛选标签" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>

            <el-select class="search" v-model="value" multiple filterable remote reserve-keyword placeholder="搜索"
              :remote-method="remoteMethod" :loading="loading">
            </el-select>
          </div>
        </div>
        <div class="list">
          <div class="listleft">
            <div class="title">活动列表</div>
            <!-- 点击切换卡片视图/列表视图 -->
            <div class="cardview" @click="view(1)">卡片视图</div>
            <div class="listview" @click="view(2)">列表视图</div>
          </div>
          <div class="listright">
            最后编辑
          </div>
        </div>

        <!-- 显示卡片视图//列表视图 -->
        <div class="carddata" v-show="block">
          <div>我是卡片数据</div>
          <!-- 点击+号--------新建活动-活动基本信息页面 -->
          <ul class="ulcard">
            <li class="licard">
              <router-link to="/newactivity">
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
              </router-link>
            </li>
            <li v-for="(item,index) in licard" :key="index" class="licard">{{item.title}}</li>
          </ul>

        </div>

        <div class="listdata" v-show="!block">
          <div>我是列表数据</div>
          <!-- 点击+号--------新建活动-活动基本信息页面 -->
          <ul class="ullist">
            <li class="lilist">
              <router-link to="/newactivity">
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
              </router-link>
            </li>
            <li v-for="(item,index) in licard" :key="index" class="lilist">{{item.title}}</li>

          </ul>

        </div>
        <!-- 分页器 -->
        <div class="block">
          <el-pagination background layout="prev, pager, next" :total="1000" class="pagenation"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3"
            :page-size="10">
          </el-pagination>
        </div>


      </div>
      <div class="centerright">
        <div class="centerright1">
          操作零一二三四五
        </div>
        <div class="centerright2">
          <h5>我的任务日历</h5>
          <div class="block">
            <el-timeline>
              <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
                :type="activity.type" :color="activity.color" :size="activity.size">
                {{activity.content}}
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
        <div class="centerright3">
          快速开始 / 便捷导航
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Work',
    data() {
      return {
        licard: [
          { title: 1 },
          { title: 2 },
          { title: 3 },
          { title: 4 },
          { title: 4 },
          { title: 5 },
          { title: 6 },
          { title: 7 },
          { title: 8 },
          { title: 7 },
          { title: 8 }
        ],
        block: true,
        // 下拉
        options: [{
          value: '选项1',
          label: '拉新'
        }, {
          value: '选项2',
          label: '节日活动'
        }, {
          value: '选项3',
          label: '日常'
        }, {
          value: '选项4',
          label: '唤醒'
        }],
        value1: [],
        // 分页
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        // 右边框
        activities: [{
          content: 'Nothing planned. Tap to create.',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }, {
          content: 'Sprint to Market',
          color: '#0bbd87'
        }, {
          content: '3:30 — 4:45 PM at Victory Square',
          size: 'large'
        }, {
          content: 'May 28 — Jun 3',
        }],
        // 远程搜索
        value: [],
        list: [],
        loading: false,
        states: ["Alabama", "Alaska", "Arizona",
          "Arkansas", "California", "Colorado",
          "Connecticut", "Delaware", "Florida",
          "Georgia", "Hawaii", "Idaho", "Illinois",
          "Indiana", "Iowa", "Kansas", "Kentucky",
          "Louisiana", "Maine", "Maryland",
          "Massachusetts", "Michigan", "Minnesota",
          "Mississippi", "Missouri", "Montana",
          "Nebraska", "Nevada", "New Hampshire",
          "New Jersey", "New Mexico", "New York",
          "North Carolina", "North Dakota", "Ohio",
          "Oklahoma", "Oregon", "Pennsylvania",
          "Rhode Island", "South Carolina",
          "South Dakota", "Tennessee", "Texas",
          "Utah", "Vermont", "Virginia",
          "Washington", "West Virginia", "Wisconsin",
          "Wyoming"]
      }
    },
    // 远程搜索
    mounted() {
      this.list = this.states.map(item => {
        return { value: `value:${item}`, label: `label:${item}` };
      });
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //判断点击那个
      view(val) {
        if (val == 1) {
          this.block = true
        }
        if (val == 2) {
          this.block = false
        }
      },
      // 远程搜索
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      },
      // 去二级路由
      tonewactivity() {
        this.$router.push("/newactivity")
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .work {
    width: 1697px;
  }

  .el-container {
    width: 1697px;
  }

  .header {
    width: 100%;
    height: 129px;
    left: 185px;
    top: 57px;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 12px;
    line-height: 150%;
    text-align: center;
    border: 1px solid #d4d4d4;
    display: flex;
  }

  .left {
    width: 80%;
    height: 66px;
    flex: left;
    margin: auto;
    display: flex;
  }

  .leftimg {
    width: 66px;
    height: 66px;
    margin: 0px 40px;
  }

  .text {
    width: 362px;
    height: 86px;
  }

  .text .up {

    font-size: 22px;
    color: black;
  }

  .text .down {
    font-size: 16px;
    color: gray;
    margin-top: 15px;
  }

  .right {
    width: 20%;
    height: 66px;
    border-left: 1px solid #ddd;
    float: right;
    margin: auto;
  }

  .right .top {
    font-size: 22px;
    color: gray;
  }

  .right .bottom {
    font-size: 16px;
    color: black;
    margin-top: 15px;
  }

  .center {
    width: 100%;
    left: 185px;
    top: 57px;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 12px;
    line-height: 150%;
    text-align: center;
    display: flex;
  }

  .centerleft {
    width: 1400px;
    flex: left;
  }

  .centerright {
    width: 20%;
    height: 1100px;
    float: right;
  }

  .centerright1 {
    height: 100px;
    background: pink;
  }

  .el-timeline {
    box-sizing: border-box;
  }

  .centerright2 {
    height: 500px;
    background: lightblue;
  }

  .centerright3 {
    height: 510px;
    background: plum;
  }


  .nav {
    display: flex;
    width: 100%;
  }

  .txt {
    color: gray;
    width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    display: inline-block;
  }

  .which {
    width: 100%;
    border: 1px solid #d4d4d4;
  }

  .carddata {
    width: 100%;
    background: palegreen;

  }

  .listdata {
    width: 100%;
    height: auto;
    background: palevioletred;
    overflow: hidden;

  }

  .select {
    width: 320px;
    margin: 0 5px;
  }

  .search {
    width: 320px;
    margin: 0 80px;
  }

  .pagenation {
    height: 50px;
    line-height: 50px;
    margin-top: 60px;
  }

  h5 {
    color: black;
  }

  .list {
    width: 100%;
    height: 50px;
  }

  .listleft {
    float: left;
    width: 40%;
    height: 50px;
    display: flex;
    color: black;
  }

  .title {
    font-size: 22px;
    width: 33%;
    height: 50px;
    line-height: 50px;
  }

  .cardview {
    font-size: 18px;
    width: 33%;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
  }

  .listview {
    font-size: 18px;
    width: 33%;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
  }

  .listright {
    float: right;
    width: 20%;
    height: 50px;
    background: lightcoral;
    color: gray;
    line-height: 50px;
  }

  .ulcard {
    width: 1380px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin: auto 20px;
  }

  .licard {
    width: 31%;
    height: 200px;
    border: 1px solid gray;
    margin: 10px;
    text-align: center;
    list-style: none;
    line-height: 200px;
  }

  .ullist {
    width: 1380px;
    height: 875px;
    margin: auto 20px;
  }

  .lilist {
    height: 100px;
    border: 1px solid gray;
    margin: 10px;
    text-align: center;
    list-style: none;
    line-height: 100px;
  }

  /* 底部 */
  .textup {
    width: 235px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    color: gray;
  }

  .tet {
    line-height: 25px;
    width: 30%;
  }

  .textdown {
    width: 335px;
    height: 25px;
    margin: auto;
    display: flex;
    color: gray;
  }

  .footer {
    width: 100%;
    height: 400px;
    background: #eee;
  }
</style>